<template>
  <div>
    <el-form class="form-container" :model="form" :rules="rules" ref="postForm" label-width="200px">
      <el-row :gutter="20">
        <el-col :span="16">
          <el-form-item label="订单号：">
            {{ orderDetail.orderNo }}
          </el-form-item>
          <el-form-item label="商品：">
            {{ productInfo.title }}
          </el-form-item>
          <el-form-item label="规格：">
            {{ productInfo.attribute }}
          </el-form-item>
          <el-form-item label="下单人：">
            {{ orderDetail.addressName }}
          </el-form-item>
          <el-form-item label="联系电话：">
            {{ orderDetail.addressMobile }}
          </el-form-item>
          <template v-if="productInfo.feedbackId > 0">
            <el-form-item label="处理方式：">
              <span v-if="feedbackRow.type == 1">退款, 但不退货</span>
              <span v-else-if="feedbackRow.type == 2">退款，并退货</span>
            </el-form-item>
            <el-form-item label="退款原因：">
              {{ feedbackRow.reason }}
            </el-form-item>
            <el-form-item label="创建时间：">
              {{ feedbackRow.createdAt }}
            </el-form-item>
            <el-form-item label="更新时间：">
              {{ feedbackRow.updatedAt }}
            </el-form-item>
            <el-form-item label="退款状态：">
              <span style="color:red;">{{ productInfo.feedbackText }}</span>
            </el-form-item>
            <el-form-item label="备注：" prop="remark">
              <el-input size="mini" v-if="feedbackRow.status == 2 || feedbackRow.status == 3" v-model="form.remark"
                type="textarea" />
              <span v-else>{{ form.remark }}</span>
            </el-form-item>
            <el-form-item>
              <el-button v-if="feedbackRow.status == 2" :loading="saveLoding" type="primary" size="mini"
                @click="hasSend()">买家已发货</el-button>
              <el-button v-if="feedbackRow.status == 3" :loading="saveLoding" type="primary" size="mini"
                @click="confirmFeedback()">收到货，同意退款</el-button>
              <el-button v-if="feedbackRow.status == 2 || feedbackRow.status == 3" :loading="saveLoding" type="primary"
                size="mini" @click="cancelFeedback()">取消维权</el-button>
              <el-button type="white" size="mini" @click="cancel()">取消</el-button>
            </el-form-item>
          </template>
          <template v-else>

            <el-form-item label="是否同意：" prop="refundStatus">
              <el-radio-group v-model="form.refundStatus">
                <el-radio :label="15">同意</el-radio>
                <el-radio :label="10">拒绝</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="处理方式：" prop="type" v-if="form.refundStatus == 15">
              <el-radio-group v-model="form.type">
                <el-radio :label="1">退款, 但不退货</el-radio>
                <el-radio v-if="productInfo.shippingStatus == 1" :label="2">退款，并退货</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="退款原因：" prop="reason">
              <el-input size="mini" v-model="form.reason" placeholder="请输入退款原因" />
            </el-form-item>
            <el-form-item label="退款金额：" prop="amount" v-if="orderDetail.canFeedbackAmount > 0">
              <el-input type="number" size="mini" v-model="form.amount" />
            </el-form-item>
            <el-form-item label="退款红包：" prop="redpacket"
              v-if="orderDetail.canFeedbackRedpacket > 0 && form.refundStatus == 15">
              <el-input type="number" size="mini" v-model="form.redpacket" />
            </el-form-item>
            <el-form-item label="退款福利：" prop="fuli" v-if="orderDetail.canFeedbackFuli > 0 && form.refundStatus == 15">
              <el-input type="number" size="mini" v-model="form.fuli" />
            </el-form-item>
            <el-form-item label="">
              收益更新：
            </el-form-item>
            <el-form-item :label="orderDetail.rewardNickname" prop="fuli" v-if="orderDetail.rewardUid > 0">
              <el-input type="number" size="mini" v-model="form.rewardAmount" />
            </el-form-item>
            <el-form-item :label="orderDetail.rewardNickname2" prop="fuli" v-if="orderDetail.rewardUid2 > 0">
              <el-input type="number" size="mini" v-model="form.rewardAmount2" />
            </el-form-item>
            <el-form-item :label="orderDetail.rewardNickname3" prop="fuli" v-if="orderDetail.rewardUid3 > 0">
              <el-input type="number" size="mini" v-model="form.rewardAmount3" />
            </el-form-item>
            <el-form-item :label="orderDetail.rewardNickname4" prop="fuli" v-if="orderDetail.rewardUid4 > 0">
              <el-input type="number" size="mini" v-model="form.rewardAmount4" />
            </el-form-item>
            <el-form-item :label="orderDetail.rewardNickname5" prop="fuli" v-if="orderDetail.rewardUid5 > 0">
              <el-input type="number" size="mini" v-model="form.rewardAmount5" />
            </el-form-item>
            <el-form-item :label="orderDetail.rewardNickname6" prop="fuli" v-if="orderDetail.rewardUid6 > 0">
              <el-input type="number" size="mini" v-model="form.rewardAmount6" />
            </el-form-item>
            <el-form-item>
              <el-button :loading="saveLoding" type="primary" size="mini" @click="next()">确定退款</el-button>
              <el-button type="white" size="mini" @click="cancel()">取消</el-button>
            </el-form-item>

          </template>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import {
  order_detail,
  order_logistics,
  order_feedbackNew,
  order_feedbackHasSend,
  order_feedbackCancel,
  order_feedbackConfirm
} from '../../api/order';

export default {
  name: 'order-feedback',
  components: {
  },
  props: {
    formData: Object
  },
  computed: {
  },
  watch: {
    formData: {
      immediate: true,
      handler(val) {
        // console.log(val)
        this.currentId = val.order_id;
        this.currentItemId = val.order_item_id;
        this.$nextTick(() => {
          this.$refs.postForm.resetFields();
        });

        if (this.currentId > 0) {
          this.getDetail()
        }
      }
    }
  },
  data() {
    return {
      feedbackRow: {},
      productInfo: {},
      saveLoding: false,
      activeName: "first",
      logisticsList: [],
      orderDetail: {},
      form: {
        refundId: 0,
        orderId: 0,
        orderItemId: 0,
        type: undefined,
        reason: undefined,
        remark: undefined,
        amount: undefined,
        redpacket: undefined,
        fuli: undefined,
        rewardAmount: undefined,
        rewardAmount2: undefined,
        rewardAmount3: undefined,
        rewardAmount4: undefined,
        rewardAmount5: undefined,
        rewardAmount6: undefined,
        refundStatus: 15,
      },
      currentId: 0,
      currentItemId: 0,
      formStatus: 'create',
      rules: {
        type: [
          {
            required: true,
            message: '请选择处理方式',
            trigger: 'blur'
          }
        ],
        reason: [
          {
            required: true,
            message: '请填写退款原因',
            trigger: 'blur'
          }
        ],
        logisticsId: [
          {
            required: true,
            message: '请选择物流公司',
            trigger: 'blur'
          }
        ],
        logisticsKdh: [
          {
            required: true,
            message: '请输入快递单号',
            trigger: 'blur'
          }
        ],
      },
      fetchSuccess: true,
      saveLoading: false,
    }
  },
  created() {
    this.getLogistics();
  },
  methods: {
    getLogistics() {
      order_logistics().then((res) => {
        this.logisticsList = res.data;
      }).catch((err) => {
        this.logisticsList = []
      });
    },
    resetTemp() {
      this.form = {
        refundId: 0,
        orderId: 0,
        orderItemId: 0,
        type: undefined,
        reason: undefined,
        remark: undefined,
        amount: undefined,
        redpacket: undefined,
        fuli: undefined,
        rewardAmount: undefined,
        rewardAmount2: undefined,
        rewardAmount3: undefined,
        rewardAmount4: undefined,
        rewardAmount5: undefined,
        rewardAmount6: undefined,
        refundStatus: 15,
      };
    },
    getDetail() {
      this.resetTemp();

      order_detail(this.currentId).then(response => {
        this.orderDetail = response.data;

        if (this.orderDetail) {
          this.form.orderId = this.currentId;
          this.form.refundId = this.currentId;
          this.form.amount = this.orderDetail.canFeedbackAmount;
          this.form.redpacket = this.orderDetail.canFeedbackRedpacket;
          this.form.fuli = this.orderDetail.canFeedbackFuli;
          this.form.rewardAmount = this.orderDetail.rewardAmount;
          this.form.rewardAmount2 = this.orderDetail.rewardAmount2;
          this.form.rewardAmount3 = this.orderDetail.rewardAmount3;
          this.form.rewardAmount4 = this.orderDetail.rewardAmount4;
          this.form.rewardAmount5 = this.orderDetail.rewardAmount5;
          this.form.rewardAmount6 = this.orderDetail.rewardAmount6;
          this.form.refundStatus = 15
        } else {
          this.form.orderId = undefined;
          this.form.refundId = undefined;
        }

        this.orderDetail.products.forEach((item) => {
          if (item.id === this.currentItemId) {
            this.productInfo = item;
            if (this.productInfo.shippingStatus == 1) {
              this.form.type = 2;
            } else {
              this.form.type = 1;
            }

            if (this.productInfo.feedbackId > 0) {
              this.orderDetail.feedbackList.forEach((item2) => {
                if (item2.id == this.productInfo.feedbackId) {
                  this.feedbackRow = item2;
                  this.form.remark = this.feedbackRow.remark;
                  // console.log(this.feedbackRow)
                  return false;
                }
              })
            } else {
              this.feedbackRow = {};
            }
            return false;
          }
        })
      }).catch(() => {
        this.form.orderId = undefined;
        this.form.refundId = undefined;
      });
    },
    cancel() {
      this.$emit('cancelCreate');
    },
    hasSend() {
      this.$confirm('确定买家已发货？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          order_feedbackHasSend({
            orderId: this.currentId,
            orderItemId: this.currentItemId,
            remark: this.form.remark
          }).then((res) => {
            this.resetTemp();
            this.saveLoding = false;
            this.$emit('okCreate');

          }).catch((err) => {
            this.saveLoding = false;
          })
        }).catch(() => { });

    },
    cancelFeedback() {
      this.$confirm('确定取消维权申请？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          order_feedbackCancel({
            orderId: this.currentId,
            orderItemId: this.currentItemId,
            remark: this.form.remark
          }).then((res) => {
            this.resetTemp();
            this.saveLoding = false;
            this.$emit('okCreate');

          }).catch((err) => {
            this.saveLoding = false;
          })
        }).catch(() => { });

    },
    confirmFeedback() {
      this.$confirm('确定同意退款？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          order_feedbackConfirm({
            orderId: this.currentId,
            orderItemId: this.currentItemId,
            remark: this.form.remark
          }).then((res) => {
            this.resetTemp();
            this.saveLoding = false;
            this.$emit('okCreate');

          }).catch((err) => {
            this.saveLoding = false;
          })
        }).catch(() => { });

    },
    next() {
      let form = "postForm";

      if (form) {
        this.$refs[form].validate(valid => {
          if (valid) {
            this.saveLoding = true;
            this.form.orderId = this.currentId;
            this.form.refundId = this.currentId;
            this.form.orderItemId = this.currentItemId;
            console.log(this.form, '%%%%%%%%%%')
            // return
            order_feedbackNew(this.form).then((res) => {
              this.resetTemp();
              this.saveLoding = false;
              this.$emit('okCreate');

            }).catch((err) => {
              this.saveLoding = false;
            })
          }
        });
      }
    },
  }
}
</script>
